<template>
	<view style="background-color: #ffc9be; height: 100vh; overflow: auto;">
		<view class="navbar-container">
			<u-navbar title="臻成公考" :is-back="false" :background="background" :border-bottom="false"></u-navbar>
			<u-tabs-swiper ref="tabsSwiper" :list="list" :is-scroll="false" bg-color="#fbfcff"
				@change="tabsChange"></u-tabs-swiper>
		</view>

		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="xcswiper"
			style="height: 2250rpx;">
			<!-- 行测页面 -->
			<swiper-item>
				<view class="head" style="padding: 50rpx 30rpx 20rpx;">
					<u-swiper bg-color="#ffc9be" width="70%" height="300rpx" :indicator="true" indicatorStyle="rect" radius="15"
						circular="true" :border-radius="20" :list="swiper" :effect3d="true"></u-swiper>
				</view>

				<view class="card-container01">
					<swiper :indicator-dots="false" class="swiper">
						<swiper-item v-for="(page, pageIndex) in swiperPages" :key="pageIndex">
							<u-grid col="4" :border="false" align="center">
								<u-grid-item v-for="(item, index) in page" :key="index"
									:customStyle="{width: '150rpx', height: '150rpx'}"
									@click="handleItemClick(item)">
									<u-icon :customStyle="{paddingTop: '10rpx'}" :name="item.icon" :size="48"></u-icon>
									<text class="grid-text">{{ item.name }}</text>
								</u-grid-item>
							</u-grid>
						</swiper-item>
					</swiper>
				</view>

				<u-toast ref="toast" :duration="2000" />

				<!-- 行测页面 -->
				<view>
					<div class="container"
						style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
						<div class="left-side" style="display: flex; align-items: center;">
							<img src="/static/GongKao/images/sundry/专项练习.png" alt="专项练习图标"
								style="margin-right: 7px; height: 30px; width: 30px;">
							<span class="large-font">专项练习</span>
						</div>
						<div class="spacer" style="flex: 1;"></div> <!-- 创建一个flex空间，用于分隔左右两部分 -->
						<button class="rounded-button" @click="showDialog"
							style="border-radius: 10px; padding: 4rpx 14rpx; cursor: pointer; font-size: 12px; color: white; background: linear-gradient(to right, #add8e6, #87ceeb); display: flex; align-items: center;">
							<img src="/static/GongKao/images/sundry/刷题设置-白色.png" alt="刷题设置图标"
								style="margin-right: 4px; height: 16px; width: 16px;">
							<span>刷题设置</span>
						</button>
					</div>

					<view class="card-container02">
						<u-cell-group :border="false">
							<u-cell-item @click="goto('6')" class="custom-cell-item">
								<view class="cell-title-wrapper">
									<text class="cell-title">政治理论</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[13].completed / progressData[13].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[13].completed }}/{{ progressData[13].total }}</text>
									</view>
								</view>
							</u-cell-item>
							<u-cell-item @click="goto('1')" class="custom-cell-item">
								<view class="cell-title-wrapper">
									<text class="cell-title">常识判断</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[1].completed / progressData[1].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[1].completed }}/{{ progressData[1].total }}</text>
									</view>
								</view>
							</u-cell-item>
							<u-cell-item @click="goto('2')" class="custom-cell-item">
								<view class="cell-title-wrapper">
									<text class="cell-title">数量关系</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[2].completed / progressData[2].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[2].completed }}/{{ progressData[2].total }}</text>
									</view>
								</view>
							</u-cell-item>
							<u-cell-item @click="goto('3')" class="custom-cell-item">
								<view class="cell-title-wrapper">
									<text class="cell-title">判断推理</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[3].completed / progressData[3].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[3].completed }}/{{ progressData[3].total }}</text>
									</view>
								</view>
							</u-cell-item>
							<u-cell-item @click="goto('4')" class="custom-cell-item">
								<view class="cell-title-wrapper">
									<text class="cell-title">资料分析</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[4].completed / progressData[4].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[4].completed }}/{{ progressData[4].total }}</text>
									</view>
								</view>
							</u-cell-item>
							<u-cell-item @click="goto('5')" class="custom-cell-item" :border-bottom="false">
								<view class="cell-title-wrapper">
									<text class="cell-title">言语理解与表达</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[5].completed / progressData[5].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[5].completed }}/{{ progressData[5].total }}</text>
									</view>
								</view>
							</u-cell-item>
						</u-cell-group>
					</view>

					<!-- 刷题设置弹窗 -->
					<u-mask :show="dialogVisible" :duration="400" :zoom="true"
						:custom-style="{background: 'rgba(0, 0, 0, 0.5)'}" @click="hideDialog">
						<view class="dialog" @click.stop>
							<view class="dialog-content">
								<text class="title-text">选择刷题量:</text>
								<u-slider v-model="sliderValue" :min="25" :max="100" step="25"></u-slider>
								<text class="slider-value">{{ questionCount }}</text>
								<button @click="hideDialog">关闭</button>
							</view>
						</view>
					</u-mask>

					<view>
						<div class="container"
							style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
							<div class="left-side" style="display: flex; align-items: center;">
								<img src="/static/GongKao/images/sundry/套卷练习.png" alt="套卷练习图标"
									style="margin-right: 7px; height: 30px; width: 30px;">
								<span class="large-font">套卷练习</span>
							</div>
							<div class="spacer" style="flex: 1;"></div> <!-- 创建一个flex空间，用于分隔左右两部分 -->
						</div>
						<view class="card-container02">
							<u-cell-item @click="toUrl('/subPackageA/paper_select')" class="custom-cell-item"
								:border-bottom="false">
								<view class="cell-title-wrapper">
									<text class="cell-title">历年核心卷</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[6].completed / progressData[6].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[6].completed }}/{{ progressData[6].total }}</text>
									</view>
								</view>
							</u-cell-item>
						</view>
					</view>

					<!-- 用于底部留白 -->
					<view class="footer-space"></view>
				</view>
			</swiper-item>

			<!-- 申论页面 -->
			<swiper-item>
				<view class="head" style="padding: 50rpx 30rpx 20rpx;">
					<u-swiper width="70%" height="300rpx" :indicator="true" indicatorStyle="rect" radius="15"
						circular="true" :border-radius="20" :list="swiper" :effect3d="true"></u-swiper>
				</view>

				<view class="card-container01">
					<swiper :indicator-dots="false" class="swiper">
						<swiper-item v-for="(page, pageIndex) in swiperPages" :key="pageIndex">
							<u-grid col="4" :border="false" align="center">
								<u-grid-item v-for="(item, index) in page" :key="index"
									:customStyle="{width: '150rpx', height: '150rpx'}"
									@click="handleItemClick(item)">
									<u-icon :customStyle="{paddingTop: '10rpx'}" :name="item.icon" :size="48"></u-icon>
									<text class="grid-text">{{ item.name }}</text>
								</u-grid-item>
							</u-grid>
						</swiper-item>
					</swiper>
				</view>
				
				<u-toast ref="toast" :duration="2000" />

				<view>
					<div class="container"
						style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
						<div class="left-side" style="display: flex; align-items: center;">
							<img src="/static/GongKao/images/sundry/专项练习.png" alt="专项练习图标"
								style="margin-right: 7px; height: 30px; width: 30px;">
							<span class="large-font">专项练习</span>
						</div>
						<div class="spacer" style="flex: 1;"></div> <!-- 创建一个flex空间，用于分隔左右两部分 -->
					</div>

					<view class="card-container02">
						<u-cell-group :border="false">
							<u-cell-item @click="gotosl('1')" class="custom-cell-item">
								<view class="cell-title-wrapper">
									<text class="cell-title">归纳概括</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[7].completed / progressData[7].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[7].completed }}/{{ progressData[7].total }}</text>
									</view>
								</view>
							</u-cell-item>
							<u-cell-item @click="gotosl('2')" class="custom-cell-item">
								<view class="cell-title-wrapper">
									<text class="cell-title">问题对策</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[8].completed / progressData[8].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[8].completed }}/{{ progressData[8].total }}</text>
									</view>
								</view>
							</u-cell-item>
							<u-cell-item @click="gotosl('3')" class="custom-cell-item">
								<view class="cell-title-wrapper">
									<text class="cell-title">分析理解</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[9].completed / progressData[9].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[9].completed }}/{{ progressData[9].total }}</text>
									</view>
								</view>
							</u-cell-item>
							<u-cell-item @click="gotosl('4')" class="custom-cell-item">
								<view class="cell-title-wrapper">
									<text class="cell-title">公文写作</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[10].completed / progressData[10].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[10].completed }}/{{ progressData[10].total }}</text>
									</view>
								</view>
							</u-cell-item>
							<u-cell-item @click="gotosl('5')" class="custom-cell-item" :border-bottom="false">
								<view class="cell-title-wrapper">
									<text class="cell-title">大作文小作文</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[11].completed / progressData[11].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[11].completed }}/{{ progressData[11].total }}</text>
									</view>
								</view>
							</u-cell-item>
						</u-cell-group>
					</view>

					<view>
						<div class="container"
							style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
							<div class="left-side" style="display: flex; align-items: center;">
								<img src="/static/GongKao/images/sundry/套卷练习.png" alt="套卷练习图标"
									style="margin-right: 7px; height: 30px; width: 30px;">
								<span class="large-font">套卷练习</span>
							</div>
							<div class="spacer" style="flex: 1;"></div> <!-- 创建一个flex空间，用于分隔左右两部分 -->
						</div>
						<view class="card-container02">
							<u-cell-item @click="toUrl('/subPackageB/slpaper_select')" class="custom-cell-item"
								:border-bottom="false">
								<view class="cell-title-wrapper">
									<text class="cell-title">历年核心卷</text>
									<view class="progress-container">
										<u-line-progress
											:percent="(progressData[12].completed / progressData[12].total) * 100"
											:show-percent="false" height="14" class="line-progress"></u-line-progress>
										<text
											class="progress-text">{{ progressData[12].completed }}/{{ progressData[12].total }}</text>
									</view>
								</view>
							</u-cell-item>
						</view>
					</view>

					<!-- 用于底部留白 -->
					<view class="footer-space"></view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import UCellItem from "@/uview-ui/components/u-cell-item/u-cell-item.vue";
	import UCellGroup from "@/uview-ui/components/u-cell-group/u-cell-group.vue";
	import UIcon from "@/uview-ui/components/u-icon/u-icon.vue";
	import UProgress from "@/uview-ui/components/u-line-progress/u-line-progress.vue";
	import uTabsSwiperVue from "@/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue";
	import UToast from "@/uview-ui/components/u-toast/u-toast.vue";
	import {
		allQuestions
	} from "@/api/business/question";
	import {
		allPapers
	} from "@/api/business/paper";
	import {
		allCorrects
	} from "@/api/business/correct";
	import {
		allSlquestions
	} from "@/api/business/slquestion";
	import {
		allSlpapers
	} from "@/api/business/slpaper";
	import {
		allUserquestionss
	} from "@/api/business/userquestions";

	export default {
		components: {
			UCellItem,
			UCellGroup,
			UIcon,
			UProgress,
			uTabsSwiperVue,
			UToast
		},
		data() {
			return {
				sliderValue: 25,
				currentDialogContent: '',
				itemDialogVisible: false,
				current: 0,
				swiperCurrent: 0,
				list: [{
					name: '行测'
				}, {
					name: '申论'
				}],
				swiper: [
					'https://xyh.zjit.ac.cn/profile/upload/2024/12/06/banner01.jpg',
					'https://xyh.zjit.ac.cn/profile/upload/2024/12/06/banner02.jpg',
					'https://xyh.zjit.ac.cn/profile/upload/2024/12/06/banner03.jpg',
				],
				swiperPages: [
					[{
							icon: 'close-circle',
							name: '我的错题'
						},
						{
							icon: 'star',
							name: '我的收藏'
						},
						{
							icon: 'edit-pen',
							name: '我的申论'
						},
						{
							icon: 'gift',
							name: '免费资料'
						},
						{
							icon: 'server-man',
							name: '联系客服'
						},
						{
							icon: 'tags',
							name: '重点国企'
						},
						{
							icon: 'plus-people-fill',
							name: '成功上岸'
						},
						{
							icon: 'more-circle',
							name: '关于我们'
						}
					]
				],
				dialogVisible: false,
				background: {
					backgroundColor: '#fbfcff',
				},
				user_id: null,
				progressData: {
					1: {
						completed: 0,
						total: 0
					}, // 常识判断
					2: {
						completed: 0,
						total: 0
					}, // 数量关系
					3: {
						completed: 0,
						total: 0
					}, // 判断推理
					4: {
						completed: 0,
						total: 0
					}, // 资料分析
					5: {
						completed: 0,
						total: 0
					}, // 言语理解与表达
					6: {
						completed: 0,
						total: 0
					}, // 行测套卷
					7: {
						completed: 0,
						total: 0
					}, // 归纳概括
					8: {
						completed: 0,
						total: 0
					}, // 问题对策
					9: {
						completed: 0,
						total: 0
					}, // 分析理解
					10: {
						completed: 0,
						total: 0
					}, // 公文写作
					11: {
						completed: 0,
						total: 0
					}, // 大作文小作文
					12: {
						completed: 0,
						total: 0
					}, // 申论套卷
					13: {
						completed: 0,
						total: 0
					}, // 政治理论
				},
			};
		},
		mounted() {
			this.fetchUserProgress();
		},
		methods: {
			handleItemClick(item) {
			      switch (item.name) {
			        case '我的错题':
			          this.navigateTo('/subPackageB/wrong_questions?atype=1');
			          break;
			        case '我的收藏':
			          this.navigateTo('/subPackageB/wrong_questions?atype=2');
			          break;
			        case '我的申论':
			          this.navigateTo('/subPackageB/mysl');
			          break;
			        case '成功上岸':
			          this.$refs.toast.show({
					  title: '详情请见公众号哦',
					  type: 'primary'
					  });
			          break;
			        case '免费资料':
			          this.$refs.toast.show({
			          title: '详情请见公众号哦',
			          type: 'primary'
			          });
			          break;
					  case '重点国企':
					    this.$refs.toast.show({
					    title: '详情请见公众号哦',
					    type: 'primary'
					    });
					    break;
						case '关于我们':
						  this.$refs.toast.show({
						  title: '详情请见公众号哦',
						  type: 'primary'
						  });
						  break;
						  case '联系客服':
						    this.$refs.toast.show({
						    title: '详情请见公众号哦',
						    type: 'primary'
						    });
						    break;
			        default:
			          break;
			      }
			    },
			    navigateTo(url) {
			      uni.navigateTo({ url });
			    },
			async fetchUserProgress() {
				try {
					// 获取用户做过的题目记录
					const userQuestionsResponse = await allUserquestionss({
						user_id: this.user_id
					});
					const userQuestions = userQuestionsResponse.data || [];

					// 获取题目总数
					const questionResponse = await allQuestions({});
					const questions = questionResponse.data || [];

					// 获取试卷总数
					const paperResponse = await allPapers({});
					const papers = paperResponse.data || [];

					// 获取用户做过的申论题目记录
					const correctResponse = await allCorrects({
						user_id: this.user_id
					});
					const corrects = correctResponse.data || [];

					// 获取申论题目总数
					const slquestionResponse = await allSlquestions({});
					const slquestions = slquestionResponse.data || [];

					// 获取申论试卷总数
					const slpaperResponse = await allSlpapers({});
					const slpapers = slpaperResponse.data || [];

					// 更新题目总数
					this.progressData[1].total = questions.filter(q => q.type === '1').length; // 常识判断
					this.progressData[2].total = questions.filter(q => q.type === '2').length; // 数量关系
					this.progressData[3].total = questions.filter(q => q.type === '3').length; // 判断推理
					this.progressData[4].total = questions.filter(q => q.type === '4').length; // 资料分析
					this.progressData[5].total = questions.filter(q => q.type === '5').length; // 言语理解与表达
					this.progressData[6].total = papers.length; // 套卷总数
					this.progressData[7].total = slquestions.filter(q => q.type === '1').length; // 归纳概括
					this.progressData[8].total = slquestions.filter(q => q.type === '2').length; // 问题对策
					this.progressData[9].total = slquestions.filter(q => q.type === '3').length; // 分析理解
					this.progressData[10].total = slquestions.filter(q => q.type === '4').length; // 公文写作
					this.progressData[11].total = slquestions.filter(q => q.type === '5').length; // 大作文小作文
					this.progressData[12].total = slpapers.length; // 申论套卷总数
					this.progressData[13].total = questions.filter(q => q.type === '6').length; // 政治理论

					// 使用 Set 来记录已完成的题目和试卷 ID
					const completedQuestionIds = new Set();
					const completedPaperIds = new Set();

					// 计算用户完成的题目数量
					userQuestions.forEach(question => {
					  if (question.type === 6) {
					      this.progressData[13].completed++;
					  } else if (question.type && this.progressData[question.type]) {
					      this.progressData[question.type].completed++;
					  }
					  // 如果有 paper_id，表示完成了套卷
					  if (question.paperId) {
					    this.progressData[6].completed++;
					  }
					});

					// 计算用户完成的申论题目数量
					corrects.forEach(correct => {
						if (correct.type === 1) {
							if (!completedQuestionIds.has(correct.question_id)) {
								this.progressData[7].completed++;
								completedQuestionIds.add(correct.question_id);
							}
						} else if (correct.type === 2) {
							if (!completedQuestionIds.has(correct.question_id)) {
								this.progressData[8].completed++;
								completedQuestionIds.add(correct.question_id);
							}
						} else if (correct.type === 3) {
							if (!completedQuestionIds.has(correct.question_id)) {
								this.progressData[9].completed++;
								completedQuestionIds.add(correct.question_id);
							}
						} else if (correct.type === 4) {
							if (!completedQuestionIds.has(correct.question_id)) {
								this.progressData[10].completed++;
								completedQuestionIds.add(correct.question_id);
							}
						} else if (correct.type === 5) {
							if (!completedQuestionIds.has(correct.question_id)) {
								this.progressData[11].completed++;
								completedQuestionIds.add(correct.question_id);
							}
						}
						if (correct.paper_id && !completedPaperIds.has(correct.paper_id)) {
							this.progressData[12].completed++;
							completedPaperIds.add(correct.paper_id);
						}
					});

					// 计算进度百分比
					this.calculateProgressPercent();
				} catch (error) {
					console.error('Error fetching user progress:', error);
				}
			},
			calculateProgressPercent() {
				for (let type = 1; type <= 13; type++) {
					if (this.progressData[type].total > 0) {
						this.progressData[type].percent = (this.progressData[type].completed / this.progressData[type]
							.total) * 100;
					} else {
						this.progressData[type].percent = 0;
					}
				}
			},
			goto(type) {
				this.navigateTo(`/subPackageA/paper?type=${type}&count=${this.questionCount}`);
			},
			gotosl(type) {
				this.navigateTo(`/subPackageB/slpaper?type=${type}`);
			},
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabsSwiper.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabsSwiper.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			toUrl(url) {
				uni.navigateTo({
					url
				});
			},
			showDialog() {
				this.dialogVisible = true;
			},
			hideDialog() {
				this.dialogVisible = false;
			}
		},
		computed: {
			questionCount() {
				return this.sliderValue * 0.4;
			}
		}
	}
</script>


<style lang="scss" scoped>
	.navbar-container {
		position: sticky;
		top: 0;
		z-index: 100;
		background-color: #ffffff;
	}

	.card-container01 {
		border-radius: 28rpx;
		overflow: hidden;
		background-color: #fff;
		padding: 10rpx;
		margin: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
	}

	.card-container02 {
		border-radius: 28rpx;
		overflow: hidden;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
	}

	.large-font {
		font-size: 18px;
	}

	.swiper {
		height: 350rpx;
	}

	.grid-text {
		font-size: 12px;
		color: #909399;
		padding: 10rpx 0 20rpx 0;
		box-sizing: border-box;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.dialog {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		border-radius: 10rpx;
		padding: 20px;
		z-index: 1019;
		width: 80%;
		height: auto;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
	}

	.title-text {
		font-size: 16px;
		font-weight: bold;
	}

	.slider-value {
		font-size: 16px;
	}

	.dialog-content button {
		/* 按钮样式 */
	}

	.cell-title-wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.cell-title {
		font-size: 14px;
		margin-bottom: -6px;
	}

	.progress-container {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.line-progress {
		flex: 1;
		max-width: 60%;
	}

	.progress-text {
		margin-left: 35rpx;
		font-size: 11px;
		color: #909399;
	}

	.footer-space {
		height: 50rpx;
	}

	.xcswiper {}
</style>